import React, {useState} from 'react';
import styles from './index.less';
import Example from "@/pages/MenuList/Formily/FormilyBasic/components/Example";
import {getColum} from "@/services/example.service";
import {useMount} from "ahooks";
import {tableColumnOperationBtn} from "@/utls/table/tableColumnOperationBtn";
import {Modal} from "antd";

const FormilyBasic = () => {
    const [tableData, setTableData] = useState([])
    useMount(() => {
        getColum().then((res) => {
            setTableData(res);
        })
    })
    const basicFormSchema = {
        type: 'object',
        properties: {
            grid: {
                type: 'void',
                'x-component': 'FormGrid',
                'x-component-props': {
                    minColumns: [4, 6, 10],
                },
                properties: {
                    aaa: {
                        type: 'string',
                        title: 'AAA',
                        'x-decorator': 'FormItem',
                        'x-component': 'Input',
                    },
                    bbb: {
                        type: 'string',
                        title: 'BBB',
                        'x-decorator': 'FormItem',
                        'x-component': 'Input',
                    },
                    ccc: {
                        type: 'string',
                        title: 'CCC',
                        'x-decorator': 'FormItem',
                        'x-component': 'Input',
                    },
                    ddd: {
                        type: 'string',
                        title: 'DDD',
                        'x-decorator': 'FormItem',
                        'x-component': 'Input',
                    },
                    eee: {
                        type: 'string',
                        title: 'EEE',
                        'x-decorator': 'FormItem',
                        'x-component': 'Input',
                    },
                    fff: {
                        type: 'string',
                        title: 'FFF',
                        'x-decorator': 'FormItem',
                        'x-component': 'Input',
                    },
                    ggg: {
                        type: 'string',
                        title: 'GGG',
                        'x-decorator': 'FormItem',
                        'x-component': 'FormButtonGroup.FormItem',
                        properties: {
                            submit: {
                                type: 'string',
                                title: 'GGG',
                                'x-component': 'Submit',
                            }
                        }
                    }
                },
            },
        },
    }

    const basicTableSchema = {
        type: 'object',
        properties: {
            selectTable: {
                type: 'array',
                'x-decorator': 'FormItem',
                'x-component': 'SelectTable',
                'x-component-props': {
                    dataSource: tableData,
                    bordered: true,
                },
                properties: {
                    name: {
                        type: 'string',
                        'x-component': 'SelectTable.Column',
                        'x-component-props': {
                            width: '40%',
                            align: 'left',
                            title: '标题',
                        },
                    },
                    description: {
                        type: 'string',
                        'x-component': 'SelectTable.Column',
                        'x-component-props': {
                            width: '40%',
                            title: '描述',
                        },
                    },
                    action: {
                        type: 'string',
                        'x-component': 'SelectTable.Column',
                        'x-component-props': {
                            width: '20%',
                            title: '操作',
                            render: tableColumnOperationBtn({
                                button: [{label: '查看', value: 'view'}], callBack: (param: string) => {
                                    if (param === 'view') {
                                        Modal.info({
                                            title: 'This is a notification message',
                                            content: (
                                                <div>
                                                    <p>some messages...some messages...</p>
                                                    <p>some messages...some messages...</p>
                                                </div>
                                            ),
                                        });
                                    }
                                }
                            })
                        },
                    }
                },
            },
        },
    }


    return (
        <div className={styles['basic-container']}>
            <Example basicTableSchema={basicTableSchema} basicFormSchema={basicFormSchema}></Example>
        </div>
    );
};
export default FormilyBasic;
